<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小米轮播图</title>
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery-3.4.1.min.js"></script>
</head>
<body>

	<div class="wrap">
		<ul class="list">
			<li class="item active" >0</li>
			<li class="item" >1</li>
			<li class="item" >2</li>
			<li class="item" >3</li>
			<li class="item" >4</li>
		</ul>

		<ul class="pointList">
			<li class="point active" data-index='0'></li>
			<li class="point" data-index='1'></li>
			<li class="point" data-index='2'></li>
			<li class="point" data-index='3'></li>
			<li class="point" data-index='4'></li>

		</ul>

		<button type="button" class="btn" id="goPre">向左</button>
		<button type="button" class="btn" id="goNext">向右</button>

	</div>



<script type="text/javascript">

console.log("js调试");

var items=document.getElementsByClassName("item");
var goPrevBtn=document.getElementById('goPre');
var goNextBtn=document.getElementById('goNext');

var points = document.getElementsByClassName('point')
var time=0;//定时器图片跳转参数





var index=0;//表示第几张图片在展示

var clearActive = function(){
	for(var i=0; i<items.length; i++ ){
		items[i].className=' item '
	}

	for(var i=0; i<points.length; i++ ){
		points[i].className='point '
	}
}



var goIndex = function(){
	clearActive()
	items[index].className = "item active"
	points[index].className = "point active"
}


var goNext = function(){
	if(index<items.length-1){
		index++
	}else{
		index=0
	}
	goIndex()
}

var goPrev = function(){
	if(index>0){
		index--
	}else{
		index=items.length-1
	}
	goIndex()
}




goNextBtn.addEventListener('click',function(){
	time=0
	goNext()
})

goPrevBtn.addEventListener('click',function(){
	time=0
	goPrev()
})


for(var i=0; i<points.length; i++){
	points[i].addEventListener('click', function(){

		//getAttribute---获取标签属性，这里获取一个数	
		var pointIndex=this.getAttribute('data-index')
		index=pointIndex
		goIndex()
		time=0   //在点击了圆点之后将定时器的time设置为0
	})
}



//第二部分--图片自动轮播






setInterval(function(){
	time++
	if(time == 20){
		goNext()
		time=0
	}

},100)





</script>
</body>
</html>